<template>
	<view class="content">
		<view class="main">
			<u-swiper
				:list="list3"
				indicator
				indicatorMode="line"
				circular
				height="375"
			></u-swiper>
			<view class="classify">
				<p style="padding-left: 15px;font-size: 20px;">分类</p>
				<br>
				<!-- lineWidth="30" lineColor="#f56c6c" -->
				  <u-tabs
					:list="list4"
					lineWidth="30"
					:activeStyle="{
						color: '#ffffff',
						borderRadius:'40px/50px;',
						textAlign:'center',
						width:'120rpx',
						background: '#6152FF',
						transform: 'scale(1.05)'
					}"
					:inactiveStyle="{
						color: '#ffffff',
						transform: 'scale(1)'
					}"
					itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"
					@click="changeMovieclass"
				>
				</u-tabs>
				<br>
			 	<p  style="padding-left: 15px;font-size: 20px;">最受欢迎</p> 
				<view class="movie-list">
					<view class="movie-wapper" v-for="item in welList" :key="item.id" :value="item.id">
						<image :src="item.img" class="poster" @click="changeDetails"></image>
					</view>
				</view>
				<p  style="padding-left: 15px;font-size: 20px;">最新电影</p>
				<view class="movie-list">
					<view class="movie-wapper" v-for="item in welList" :key="item.id" :value="item.id">
						<image :src="item.img" class="poster" ></image>
					</view>
				</view>
			</view>
			<Tabbar :current="'0'"></Tabbar>
		</view>
	</view>
</template>

<script>
import Tabbar from '../../components/tabbar/tabbar.vue'
	export default {
		data() {
			return {
				welList:[
					{
						id:'1',
						img:'/static/poster/civilwar.jpg'
					},
					{
						id:'2',
						img:'/static/poster/justice.png'
					},
					{
						id:'3',
						img:'/static/poster/aladdin.png'
					},
					
				],
				list3: [
					'/static/background/image6.png',
					'/static/background/image 6.png',
				],
			    list4: [
					{
					name: '全部的'
				}, {
					name: '动作',
				}, {
					name: '喜剧',
				}, {
					name: '爱情'
				}, {
					name: '科幻'
				}, {
					name: '悬疑'
				}, {
					name: '惊悚'
				}],
			}
		},
		components: {
			Tabbar
		}, 
		methods:{
			changeMovieclass(){
				var titlebar = '喜剧片'
				uni.navigateTo({
					url:`/pages/movie/movie?title=${titlebar}`
				})
			},
			changeDetails(){
				uni.navigateTo({
					url:"/pages/moviedetails/moviedetails"
				})
			}
		},
		onShow() {
			uni.hideTabBar({
				animation: false
			})
		},
	}
</script>

<style>
page{
	background: linear-gradient(to bottom,#06041F,#06041F);
	color: white;
}
.movie-list{
	padding-left: 10px;
	display: flex;
	justify-content: flex-start;
	flex-direction: row;  
	flex-wrap: wrap;
}
.movie-wapper{
	  
	padding: 10upx 20upx;
}
.poster{
	width: 200upx;
	height: 270upx;
}
</style>
